<template>
  <view :style="{ height }" class="component-container">
    <view class="input-left">
      <slot name="input-left"></slot>
    </view>
    <input class="input" v-model="value" :placeholder="placeholder" :disabled="disabled" :password="password" />
    <view class="input-right">
      <slot name="input-right"></slot>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'

defineProps({
  modelValue: {
    type: String,
    default: ''
  },
  placeholder: {
    type: String,
    default: ''
  },
  disabled: {
    type: Boolean,
    default: false
  },
  password: {
    type: Boolean,
    default: false
  },
  inputLeftMargin: {
    type: String,
    default: '0px'
  },
  inputRightMargin: {
    type: String,
    default: '0px'
  },
  height: {
    type: String,
    default: '60px'
  }
})
const emits = defineEmits<{
  (e: 'update:modelValue', value: string): void
}>()

const value = ref('')
watch(
  () => value.value,
  () => {
    emits('update:modelValue', value.value)
  }
)
</script>

<style scoped lang="scss">
.component-container {
  display: flex;
  align-items: center;
  white-space: nowrap;

  .input {
    margin-right: v-bind(inputRightMargin);
    margin-left: v-bind(inputLeftMargin);
    width: 100%;
    flex-grow: 1;
  }

  .input-left,
  .input-right {
    display: flex;
    justify-content: rider;
    align-items: center;
  }
}
</style>
